<template>
  <div>
    <div class="main">
      <div class="right">
        <a href="javascript:void (0)" v-routers="{path:-1}">返回上一页</a>
      </div>
      <div class="header">
        <div class="title">讲台</div>
      </div>
      <div class="box-1">
        <table>
          <tr class="tr-item" v-for="(row,index) in matrix" :key="index">
            <td
                :id="cell.status===1 ? 'checked' : null"
                class="item"
                :class="{itemActive:cell.status===1}"
                v-for="(cell,indexs) in row"
                :key="indexs">
              <i v-if="cell.status===1" class="iconfont icon-jushou"></i>
            </td>
          </tr>
        </table>
      </div>
      <div class="bottom">
        <el-button type="info" class="defaultBtn">一键解答</el-button>
<!--        <el-button type="info" class="defaultBtn">随机抽查</el-button>-->
      </div>

      <a href="javascript:void (0)" v-if="!isRight" @click="isRight=true" class="right-checked">签到记录</a>
      <div class="right-box" v-if="isRight">
        <div class="top">
          <a href="javascript:void (0)" @click="closeRight"><i class="el-icon-close"></i></a>
        </div>
        <div class="checked">
          <div class="circle">
            25/100
          </div>
          <div class="tip">
            签到人数
          </div>
        </div>
        <div class="item">
          <el-form label-position="top" label-width="80px" :model="formLabelAlign">
            <el-form-item label="签到开始时间">
              <el-date-picker
                  style="width: 100%;"
                  v-model="formLabelAlign.start"
                  type="datetime"
                  placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="签到结束时间">
              <el-date-picker
                  style="width: 100%;"
                  v-model="formLabelAlign.end"
                  type="datetime"
                  placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <el-button style="width: 100%;" class="defaultBtn" @click="submit" type="info">创建签到码</el-button>
        </div>
      </div>

      <el-dialog
          :visible.sync="dialogVisible"
          width="500px"
          :before-close="handleClose">
        <div  class="logo"><img  src="@/assets/image/logo.png" alt=""></div>
        <div class="qrcode">
          <img src="@/assets/image/qrcode.png" alt="">
          <div class="tip">扫描二维码选择座位后签到</div>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        matrix: [],
        width:25,
        isQrcode:true,
        height:10,
        dialogVisible:false,
        isRight:false,
        formLabelAlign: {
          start: '',
          end: '',
        }
      }
    },
    methods:{
      generateMatrix() {
        this.matrix = [];
        for (let i = 0; i < this.height; i++) {
          let row = [];
          for (let j = 0; j < this.width; j++) {
            row.push({id:i * 10 + j,name:'张三',state:1,status:0});
          }
          this.matrix.push(row);
        }
        // console.log(this.matrix)
      },
      handleClose(){
        this.dialogVisible=false
      },
      submit(){
        this.dialogVisible=true
      },

      closeRight(){
        this.isRight=false
      },
      getChecked(row,index){
        console.log(this.matrix)
        this.matrix.forEach((value,itemIndex)=>{
          value.forEach((value1,index1)=>{
            // console.log(itemIndex,value1,index1)
            if (itemIndex===row && index===index1){
              console.log(value1)
              value1.status===1 ? value1.status = 0:value1.status = 1
            }
          })
        })
      }
    },

    mounted() {
      setTimeout(()=>{
        this.getChecked(9,20)
      },600)

    },
    created() {
      this.generateMatrix();
    },
  }
</script>

<style lang="scss">
.main{
  width: 100%;
  height: 100vh;
  position: relative;
}
.header{
  width: 100%;
  display: flex;
  justify-content: center;
  .title{
    width: 150px;
    height: 40px;
    text-align: center;
    border: 1px solid #f6f6f6;
    line-height: 40px;
    margin-bottom: 20px;
  }
}
.tip{
  width: 100%;
  font-size: 12px;
  margin-bottom: 15px;
}
.box-1{
  width: 100%;
  display: flex;
  justify-content: center;
  .tr-item{
    margin: 10px;
    .item{
      width: 40px;
      height: 40px;
      border-radius: 5px;
      border: 1px solid #f6f5f6;
      margin: 40px;
      text-align: center;
      position: relative;
      i{
        color: #a7f50c;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
    .itemActive{
      background: #ff5246;
      border: 1px solid #ff5246;
    }
  }
}
.bottom{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.right-checked{
  width: 100px;
  height: 50px;
  display: flex;
  position: fixed;
  top: 150px;
  right: 0;
  background: #74bcff;
  border-radius: 24px 0 0 24px;
  align-items: center;
  padding: 0 15px;
  color: #fff;
  box-sizing: border-box;
}
.right-box{
  width: 300px;
  min-height: 300px;
  background: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  position: fixed;
  right: 0;
  top: 100px;
  padding: 15px;
  box-sizing: border-box;
  .top{
    width: 100%;
    font-size: 18px;
    color: #999999;
  }
  .checked{
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    .circle{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 200px;
      background: #74bcff;
      border-radius: 50%;
      color: #fff;
      font-size: 40px;
    }
    .tip{
      width: 100%;
      position: absolute;
      bottom: 10px;
      color: #fff;
    }
  }

  .item{
    width: 100%;
    margin-top: 10px;
  }
}
.logo{
  width: 100%;
  height: 60px;
  text-align: center;
  img{
    height: 60px;
    width: 300px;
    object-fit: cover;
  }
}
.qrcode{
  width: 100%;
  text-align: center  ;
  img{
    width: 280px;
    height: 280px;
    object-fit: cover;
  }
  .tip{
    width: 100%;
    font-size: 12px;
  }
}
#checked{
  background: #74bcff;
  animation: infinite 1.5s shandowBox;
  border: 1px solid #74bcff;
}
@keyframes shandowBox {
  0%{
    opacity: 0.1;
  }
  100%{
    opacity: 1;
  }
}
</style>
